/** 
 * 地址选择
 * 
 */
import { Button, List } from 'antd-mobile';
import React from 'react';
import style from './style.module.scss';
import Panel from 'components/Panel';
import { RouteChildrenProps, withRouter } from 'react-router-dom';
import { decorator } from 'grey-react-box';
import { server } from 'server';

const district = require('constant/area.json');

const Item = List.Item;
const Brief = Item.Brief;

export interface IAddresSselectProps {
    id: string;
    onOk: () => void;
}

export interface IAddresSselectPropsIn extends IAddresSselectProps, RouteChildrenProps {

}

export default decorator<IAddresSselectProps, IAddresSselectPropsIn>(withRouter)(props => {

    const { id, onOk } = props;

    const { list } = useAddresSselect();

    const onClick = React.useCallback(async e => {
        const ajax = await server.post('/medicine/order/updateOrder', {
            id,
            userName: e.userName,
            userPhone: e.userPhone,
            userAddress: JSON.stringify(e.userAddress),
            userDetailAddress: e.userDetailAddress,
        }).end()

        if (ajax.err) {

        } else {
            onOk();
        }
    }, [id, onOk])

    return (
        <>
            <Panel className={style.body} >
                <div className={style.cont} >
                    <List renderHeader={() => '收获地址'} className="my-list">
                        {list.map(e => {
                            return (
                                <Item wrap extra={<Button size="small" type="primary" onClick={() => { onClick(e) }} >选择</Button>} >
                                    {districtToString(e.userAddress, district, '')} {e.userDetailAddress}
                                    <Brief>{e.userPhone}<br />{e.userName}</Brief>
                                </Item>
                            )
                        })}
                    </List>
                </div>
            </Panel >
        </>
    )
})

const useAddresSselect = () => {

    const [list, setList] = React.useState<any[]>([])

    const update = React.useCallback(async () => {
        const url = `/medicine/address/getAll`;
        const ajax = await server.get(url).end();
        if (ajax.err) return;
        try {
            setList(ajax.res.body.data.map(e => ({ ...e, userAddress: JSON.parse(e.userAddress) })));
        } catch (error) {
            setList([])
        }
    }, [])

    React.useEffect(() => {
        update();
    }, [update])

    return {
        list
    }
}

const districtToString = (e: any[], list: any[], str: string) => {
    try {
        const ev = e ? e.slice() : [];
        if (ev && ev.length > 0) {
            const it = list.filter(v => v.value === ev[0])[0];
            if (it) {
                ev.shift();
                return districtToString(ev, it.children, `${str} ${it.label}`);
            } else {
                return str;
            }
        }
        return str;
    } catch (error) {
        return ''
    }
}